<template>
  <div class="content bg-white">
    <div class="per-top aln-center">
      <div class="aln-center">
        <img src="static/icon-invite-write.png" class="img"/>
        <div class="label">
          <span>{{registMsg[1]}}邀请您加入</span>
          <div>【{{registMsg[2]}}】</div>
        </div>
      </div>
    </div>
    <div class="pl50 pr50">
      <inputItem class="mt30" placeholder="请输入手机号" type="tel"
                 iconName="icon-login-account"
                 v-model="mobile"
                 :maxLength = "11"
                 v-validate="{ rules: { required: true, phone: true } }"
                 name="手机号"
      />
      <inputCode class="mt30" placeholder="请输入验证码" type="number"
                 iconName="icon-register-yanzheng"
                 v-model="smsAuthCode"
                 v-validate="{ rules: { required: true ,length: 6} }"
                 name="验证码"
                 :btnlabel="code"
                 :btnaction="_getAuthCode"
                 :disabled="!show"
      />
      <inputItem class="mt30" placeholder="请输入姓名" type="text"
                 iconName="icon-register-account"
                 v-model="fullname"
                 :maxLength = "15"
                 v-validate="{ rules: { required: true } }"
                 name="姓名"
      />
      <inputItem class="mt30" placeholder="请输入密码，6-20位数字和字母组合" type="password"
                 iconName="icon-login-password"
                 v-validate="{ rules: { required: true, max: 20, min: 6 } }"
                 v-model="password"
                 :maxLength = "20"
                 name="密码"
      />
      <div class="pl50 pr50 mt50">
        <mt-button size="large" type="primary" @click="_addCompany"
                   :disabled="(!smsAuthCode || !password || !fullname || !mobile )&& errors.items.length==0 || errors.items.length!=0">
          加入企业
        </mt-button>
        <div class="mt60 f26">
          已有账户?
          <router-link class="link" to="login"> 现在去登录</router-link>
        </div>
      </div>
      <div class="bottom-info f26">
        立即注册表示您遵守并同意
        <router-link class="link" to="login">《天财商龙用户协议》</router-link>
      </div>

    </div>
  </div>
</template>
<script>
  import inputItem from '@/common/plugins/input/inputItem';
  import inputCode from '@/common/plugins/input/inputCode';
  import api from '../../common/api/member';
  import mintUi from '../../common/mintUi';
  import comApi from '../../common/api/api';
  const TIME_COUNT = 60;
  export default {
    data () {
      return {
        mobile: '',
        fullname: '',
        password: '',
        smsAuthCode: '',
        username: '',
        code: '获取验证码',
        show: true,
        count: '',
        timer: null,
        registMsg: []
      };
    },
    components: {
      'inputItem': inputItem,
      'inputCode': inputCode
    },
    created () {
      let urls = decodeURIComponent(window.location.href).split('?')[1];
      if (urls) {
        let url3 = urls.split('&');
        for (let i = 0; i < url3.length; i++) {
          this.registMsg.push(url3[i].split('=')[1]);
        }
      }
      this.mobile = this.registMsg[0];
      this.fullname = this.registMsg[3];
    },
    methods: {
      getCode () {
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.code = this.count + 's后重发';
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
              this.code = this.count + 's后重发';
            } else {
              this.show = true;
              this.code = '获取验证码';
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      },
      _addCompany () {
        this.$validator.validateAll().then((result) => {
          if (result) {
            let data = {
              password: this.password,
              mobile: this.mobile,
              fullname: this.fullname,
              smsAuthCode: this.smsAuthCode,
              companyid: this.registMsg[4]
            };
            api.registAdd(data).then(res => {
              this.$router.push({path: '/inviteSuccess', query: {companyName: this.registMsg[2]}});
            });
          } else {
            mintUi.openToast(this.errors.items[0].msg);
          }
        });
      },
      _getAuthCode () {
        if (this.mobile) {
          this.$validator.validateAll('手机号', this.mobile).then((result) => {
            if (result) {
              this.getCode();
            }
          });
          let data = {
            username: this.mobile
          };
          comApi.getAuthCode(data)
            .then(res => {
              this.smsAuthCode = res;
            });
        } else {
          mintUi.openToast('请输入手机号');
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";

  .per-top {
    height: px2rem(250px);
    background: #7b78f2;
    padding-left: px2rem(40px);
  }

  .aln-center {
    display: flex;
    align-items: center;
  }

  .img {
    width: px2rem(120px);
    height: px2rem(120px);
  }

  .label {
    margin-left: px2rem(20px);
    display: inline-block;
    color: #fff;
    span {
      font-size: px2rem(30px);
    }
    div {
      font-size: px2rem(36px);
      font-weight: bold;
    }
  }

  .bottom-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: px2rem(30px);
    padding-top: px2rem(55px);
    padding-bottom: px2rem(55px);
  }

  a.link {
    color: #7b78f2;
  }
</style>
